<template>
	<view class="exchangeSucceed">
		<top-bar :home="false" backState="2000" :transparentFixedFontColor="topTabFontColor" :type="topTabType" title="填写收货地址"></top-bar>
		<view class="exchangeSucceedBox" :style="{ paddingTop: (statusBarHeight*2+136) + 'rpx' }">
			<view class="eSucceedContBox">
				<view class="insetBox">
					<view class="tips1">恭贺仙友，天降好礼</view>
					<view class="fillFormBox">
						<view class="fillEach">
							<view class="labelTit">收货人</view>
							<view class="fillInt">
								<input v-model="addForm.name" class="uni-input" name="input" placeholder="请填写收货人姓名" />
							</view>
						</view>
						<view class="fillEach">
							<view class="labelTit">手机号码</view>
							<view class="cCode">+86</view>
							<view class="fillInt">
								<input v-model="addForm.phone" class="uni-input" type="number" name="input" placeholder="请填写收货人手机号" />
							</view>
						</view>
						<view class="fillEach">
							<view class="labelTit">选择地区</view>
							<view class="fillInt">
								<input v-model="addForm.area" class="uni-input" name="input" placeholder="省市区县、乡镇等" @tap="areaSelect" :disabled="true" />
							</view>
							<u-icon name="map" color="#FFC759" label-pos="left" size="38" @tap="getLoc"></u-icon>
						</view>
						<view class="fillEach">
							<view class="labelTit">详细地址</view>
							<view class="fillInt">
								<textarea v-model="addForm.detail" placeholder-style="color:#999999" style="height: 104rpx;width: 100%;" placeholder="街道、楼牌号等"/>
							</view>
						</view>
					</view>
					<view class="tips3">体验官结束后将统一安排发货，详情可咨 询御贡优品官方客服。</view>
					<view class="fillGoBtn">提交地址</view>
				</view>
			</view>
		</view>
		<view class="addQRCode">
			<image class="cloud1" src="https://lovebirdopen.com/static/img/recruitOfficer/cloud1.png" mode=""></image>
			<image class="cloud2" src="https://lovebirdopen.com/static/img/recruitOfficer/cloud2.png" mode=""></image>
			<view class="codeBox">
				<image class="codeImg" src="https://lovebirdopen.com/static/img/recruitOfficer/codeImg.png" mode=""></image>
				<view class="codeTips">添加御贡优品客服二维码，获取更多福利信息！</view>
			</view>
			<view class="tips">更多解释权归叁思数媒所有</view>
		</view>
		
		<!-- 区域选择器 -->
		<u-picker v-model="areaShow" mode="region" @confirm="addressConfirm"></u-picker>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 顶部导航样式
				topTabType:'transparentFixed',
				topTabFontColor:'#fff',
				// 导航栏高度
				statusBarHeight: 0,
				// 填写信息
				addForm: {
					name: '',
					phone: '',
					detail:'',
					area_id:'',
					area: '',
					code:''
				},
				areaShow:false,//区域选择
			}
		},
		onLoad: function (option) {
			
		},
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onPageScroll(e) {//滚动顶部导航的变化
			if(e.scrollTop>50){
				this.topTabType = 'fixed';
				this.topTabFontColor = '';
			}
			if(e.scrollTop < 50){
				this.topTabType = 'transparentFixed';
				this.topTabFontColor = '#fff';
			}
	
		},
		methods: {
			areaSelect(){
				this.areaShow = true
			},
			addressConfirm(e){
				this.area = e.province.label +' '+ e.city.label +' '+ e.area.label;
				this.addForm.code = e.area.value;
			},
			getLoc(){
				var _this = this;
				uni.chooseLocation({
				    success: function (res) {
						uni.request({
							method:'GET',
							url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+res.latitude+','+res.longitude+'&key=UNRBZ-AVCK4-QQYUP-DN6OL-2OAJO-3NFUA&get_poi=1',
						    dataType:'json',
						    success: (res) => {
								var resData = res.data.result.ad_info;
								var resDataAdd = res.data.result.formatted_addresses;
								_this.addForm.area = resData.province + ' ' + resData.city + ' ' + resData.district;
								_this.addForm.detail = resDataAdd.recommend;
								_this.addForm.code = resData.adcode;
						    }
						});
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	.exchangeSucceed{
		min-height: 100%;
		background: radial-gradient(68.24% 68.24% at 50% 100%, rgba(249, 237, 209, 0.8) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(0deg, #FCAF89 0%, #FF3E3E 100%);
	}
	.exchangeSucceedBox{
		padding-bottom: 122rpx;
		background: url('https://lovebirdopen.com/static/img/recruitOfficer/exchangeSucceedBoxBj.png') no-repeat;
		background-size: 100% 100%;
		
		.eSucceedContBox{
			width: 602rpx;
			height: 904rpx;
			margin: 0 auto;
			padding: 4rpx;
			background: linear-gradient(180deg, #F1743F 0%, #FF472E 100%);
			border: 4rpx solid #FFF3C7;
			border-radius: 40rpx;
			
			.insetBox{
				width: 100%;
				height: 100%;
				padding: 48rpx 42rpx 0;
				background: #FFF9F2;
				box-shadow: inset 0px 0px 8rpx #F05251;
				border-radius: 34rpx;
				
				.tips1{
					margin-bottom: 32rpx;
					font-weight: 900;
					font-size: 36rpx;
					line-height: 48rpx;
					color: #ED4B34;
					text-align: center;
				}
				.fillFormBox{
					.fillEach{
						padding: 28rpx 32rpx;
						display: flex;
						line-height: 44rpx;
						border-bottom: 1rpx solid rgba(255, 189, 89, 0.2);;
						.labelTit{
							width: 120rpx;
							margin-right: 32rpx;
							font-size: 28rpx;
							color: #333333;
						}
						.cCode{
							margin-right: 16rpx;
							font-size: 28rpx;
							color: #333333;
						}
						.fillInt{
							flex: 1;
							width: 1px;
						}
					}
				}
				.tips3{
					margin-bottom: 48rpx;
					font-size: 28rpx;
					line-height: 36rpx;
					color:#923723;
				}
				.fillGoBtn{
					width: 328rpx;
					height: 96rpx;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 900;
					font-size: 36rpx;
					color: #FFF2D8;
					background: linear-gradient(180deg, #F16A3F 0%, #E82727 100%);;
					box-shadow: inset 0px -6rpx 2rpx rgba(0, 0, 0, 0.1);
					border-radius: 78rpx;
				}
			}
		}
	}
	.addQRCode{
		position: relative;
		width: 100%;
		height: 456rpx;
		margin-top: -82rpx;
		padding: 40rpx 52rpx 0;
		background: #FFF9F2;
		
		.cloud1{
			position: absolute;
			top: 180rpx;
			right: 0;
			width: 234rpx;
			height: 158rpx;
		}
		.cloud2{
			position: absolute;
			top: 284rpx;
			left: 0;
			width: 150rpx;
			height: 122rpx;
		}
		.codeBox{
			width: 100%;
			margin-bottom: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.codeImg{
				width: 240rpx;
				height: 240rpx;
				margin-right: 70rpx;
			}
			.codeTips{
				flex: 1;
				width: 1px;
				font-weight: 900;
				font-size: 28rpx;
				line-height: 36rpx;
				color: #333333;
			}
		}
		.tips{
			font-size: 24rpx;
			line-height: 36rpx;
			color: #FADAB0;
			text-align: center;
		}
	}
</style>
